<template>
	<view class="content">
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title">编辑</view>
			</template>
			<template #right>
				<view class="btn" @tap="uploadImg">发表</view>
			</template>
		</comtarbar>
		<view class="edit_box">
			<view class="textarea-box"><textarea v-model="content" placeholder="请输入文字" /></view>
			<view class="e_title">
				<view class="title">添加图片</view>
				<view v-if="imglist.length > 2"><view class="btn" @tap="deleteAll">移除全部</view></view>
			</view>
			<view class="imagebox">
				<view class="image_item" v-for="(item, index) in imglist" :key="index">
					<image @tap="previewImg(index)" class="c_image" :src="item" mode="aspectFill"></image>
					<image @tap="deleteImg(index)" class="yc" src="../../../static/images/edit/yc.png" mode="widthFix"></image>
				</view>
				<view class="image_item" v-if="imglist.length < 9" @tap="choose">
					<image class="c_image" src="../../../static/images/group/addimage.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="e_title"><view class="title">添加位置</view></view>
			<view class="localtion">
				<view class="localtion_btn" @tap="getLocaltion">定位</view>
				<view v-if="address != ''" class="address">{{ address }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../../api/request.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			content: '',
			imglist: [],
			address: '',
			path: ''
		};
	},
	onLoad(options) {
		this.path = options.path;
	},
	computed: {
		...mapGetters(['getUser'])
	},
	methods: {
		// 选择图片
		choose() {
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera '], //从相册选择
				success: res => {
					res.tempFilePaths.map(item => {
						if (this.imglist.length < 9) {
							this.imglist.push(item);
						}
						return item;
					});
				}
			});
		},
		// 移除图片
		deleteImg(index) {
			this.imglist.splice(index, 1);
		},
		// 移除全部图片
		deleteAll() {
			this.imglist = [];
		},
		// 预览图片
		previewImg(index) {
			uni.previewImage({
				urls: this.imglist,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		// 获取位置
		getLocaltion() {
			uni.chooseLocation({
				success: res => {
					this.address = res.address;
				}
			});
		},
		// 上传图片
		uploadImg() {
			// 如果有图片
			if (this.imglist.length > 0) {
				let list = [];
				let originalList = [];
				this.imglist.map(item => {
					//遍历上传图片
					uni.uploadFile({
						// url: 'http://localhost:3000/upload/dynamic',
						url: 'http://www.yemengs.cn/upload/dynamic',
						filePath: item,
						name: 'file',
						formData: {
							token: uni.getStorageSync('token'),
							savePath: 'dynamic'
						},
						success: uploadFileRes => {
							let { imgUrl, url } = JSON.parse(uploadFileRes.data);
							list.push(imgUrl);
							originalList.push(url);
							if (list.length == this.imglist.length) {
								//图片上传完毕后发布动态
								this.published(list, originalList);
							}
						}
					});
					return item;
				});
			} else {
				//没有图片
				this.published();
			}
		},
		// 发布动态
		async published(list, originalList) {
			let res = await request({
				url: '/dynamic/published',
				data: {
					token: uni.getStorageSync('token'),
					text: this.content,
					imgList: list ? list : [],
					originalList: originalList ? originalList : [],
					comments: [],
					like: [],
					date: new Date(),
					address: this.address
				},
				method: 'POST'
			});
			res = res[1].data;
			if (res.status) {
				uni.showToast({
					title: res.msg,
					duration: 1000
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
					if (this.path == 'dynamic') {
						uni.$emit('refresh'); //刷新数据
						uni.navigateTo({
							url: '../dynamic/dynamic'
						});
					} else {
						uni.$emit('refreshSocial'); //刷新数据
						uni.$emit('refresh'); //刷新数据
						uni.navigateTo({
							url: '../individual/individual?id=' + this.getUser._id
						});
					}
				}, 1300);
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../commons/css/mycss.scss';
.comtarbar {
	background: #ffffff;
	.btn {
		height: 60rpx;
		width: 100rpx;
		background: #37a603;
		font-size: 32rpx;
		color: white;
		line-height: 60rpx;
		text-align: center;
		border-radius: 10rpx;
	}
}
.edit_box {
	padding: 0rpx 20rpx;
	padding-top: 100rpx;
	height: calc(100vh - 100rpx);
	background: #f4f4f4;
	.textarea-box {
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		height: 400rpx;
		background: #ffffff;
		border-radius: 10rpx;
		textarea {
			font-size: 32rpx;
		}
	}
	.e_title {
		padding: 30rpx 0rpx 20rpx 0rpx;
		font-size: 34rpx;
		display: flex;
		justify-content: space-between;
		.btn {
			font-size: 32rpx;
			color: red;
		}
	}
	.imagebox {
		display: flex;
		flex-wrap: wrap;
		.image_item {
			height: calc((100vw - 40rpx) / 5);
			width: calc((100vw - 40rpx) / 5);
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			.c_image {
				width: 96%;
				height: 96%;
			}
			.yc {
				position: absolute;
				width: 30rpx;
				height: auto;
				right: 4rpx;
				top: 4rpx;
			}
		}
	}
	.localtion {
		display: flex;
		.localtion_btn {
			font-size: 30rpx;
			margin-left: 20rpx;
			margin-right: 40rpx;
			width: 80rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			background: #25940c;
			border-radius: 10rpx;
			color: white;
		}
		.address {
			width: calc(100% - 140rpx);
			font-size: 32rpx;
			color: #787878;
		}
	}
}
</style>
